<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/2/19
  Time: 9:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="./css/leaflet.css" />
    <script src="./js/leaflet.js"></script>
    <script src="./js/CustomWebSDK.min.js"></script>
    <script src="./js/jquery-3.1.1.js"></script>
    <script src="./js/DateFormat.js"></script>
    <script src="./js/server-root.js"></script>
    <style>
        #map { width: 100%; height: 100%; }
        body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
    </style>
</head>
<body style="width: 100%; height: 100%;margin: 0px;">

<div id="map"></div>


<script src="./js/leaflet-heat.js"></script>
<script>

    var map = L.map('map',{crs:L.CRS.CustomEPSG4326,center: {lon:116.4, lat:39.93},zoom: 11,inertiaDeceleration:15000});

    L.tileLayer('http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=42cac6e13cafbf0ee8d55b2f7af43dc8', {}).addTo(map);
    L.tileLayer('http://t1.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=42cac6e13cafbf0ee8d55b2f7af43dc8', {}).addTo(map);

    var heatLayer;

    map.on('moveend', function(e) {
        updateHeatMap();
    });

    map.on('resize', function(e) {
        updateHeatMap();
    });

    updateHeatMap();
    setInterval(updateHeatMap,10000);

    function updateHeatMap(){
        var bounds = map.getBounds();
        var boundsStr =  bounds._southWest.lng+','+bounds._southWest.lat+','+bounds._northEast.lng+','+bounds._northEast.lat;
        var zoom = map.getZoom();
        var date = new Date();
//        date.setMonth(date.getMonth()+1);
        date.setDate(date.getDay()+2);
//        var time = date.Format("yyyy-MM-dd hh:mm:ss");
        var time ='2008-02-02 15:50:00';
        var addressPoints = [];

        var url =  server_root+'/mongo/taxiHotMap?{data:{bbox:['+boundsStr+'];level:'+zoom+';time:"'+time+'"}}&tk=42cac6e13cafbf0ee8d55b2f7af43dc8';
        $.ajax(url,{dataType:'json',success:function(data){
            data = data.data;
            for(var i = 0;i<data.length;i++){
                var item = data[i];
//                var bbox = item.bbox;
//                var d1 = (bbox[1]-bbox[3])*0.5;
//                var d2 = (bbox[2]-bbox[0])*0.5;
//                var p1 = parseFloat(bbox[3])+d1;
//                var p2 =parseFloat(bbox[0])+d2;
                var p1 = item.cp[1];
                var p2 = item.cp[0];
                var p3 = item.count;
                if(!p3){
                    p3=1;
                }
                addressPoints.push([p1,p2,p3]);
            }

            if(!heatLayer){
                heatLayer = L.heatLayer([],{radius: 25});
                map.addLayer(heatLayer);
            }
            heatLayer.setLatLngs(addressPoints);
        }});

    }
</script>
</body>
</html>
